﻿<UserControl x:Class="ImageUtils.Common.EditableSlider"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" Height="16" MouseLeave="UserControl_MouseLeave">
    <UserControl.Resources>
        <Style x:Key="FlatSlider" TargetType="Slider">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Maximum" Value="10"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="Value" Value="3"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid x:Name="Root">
                            <Grid.Resources>
                                <ControlTemplate x:Key="RepeatButtonTemplate">
                                    <Grid x:Name="Root" Background="{TemplateBinding Background}"/>
                                </ControlTemplate>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ThumbDisabledOverlay" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="TrackRectangle" Fill="#FFE6EFF7" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="1" RadiusY="1" Margin="0,0,0,0" Grid.Column="0" Grid.ColumnSpan="3"
									VerticalAlignment="Stretch" />
                                <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Fill="White" RadiusX="1" RadiusY="1" Margin="0" Opacity=".55" Visibility="Collapsed" Grid.Column="0" Grid.ColumnSpan="3"
									VerticalAlignment="Stretch"/>
                                <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0"
									Background="#FF333333"/>
                                <Thumb x:Name="HorizontalThumb" Height="18" Width="11" IsTabStop="True" Grid.Column="1"/>
                                <Rectangle x:Name="ThumbDisabledOverlay" Fill="White" RadiusX="2" RadiusY="2" Width="11" Opacity=".55" Visibility="Collapsed" Grid.Column="1"/>
                                <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2"/>
                            </Grid>
                            <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="{TemplateBinding Background}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Rectangle Fill="#FFE6EFF7" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="1" RadiusY="1" Margin="0,5,0,5" Width="3" Grid.Row="0" Grid.RowSpan="3"/>
                                <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Fill="White" RadiusX="1" RadiusY="1" Margin="0,5,0,5" Width="3" Opacity=".55" Visibility="Collapsed" Grid.Row="0" Grid.RowSpan="3"/>
                                <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="2"/>
                                <Thumb x:Name="VerticalThumb" Height="11" Width="18" IsTabStop="True" Grid.Row="1"/>
                                <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="0"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid Cursor="SizeWE" HorizontalAlignment="Stretch" x:Name="rootGrid" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Rectangle x:Name="rectBase" Fill="#FFB1B1B1" Stroke="#FFA3AEB9" RadiusX="3" RadiusY="3" VerticalAlignment="Stretch"  
                           MouseLeftButtonDown="rectBase_MouseLeftButtonDown" PreviewMouseLeftButtonUp="rectBase_MouseLeftButtonUp" MouseMove="rectBase_MouseMove"
                           />
        <Rectangle x:Name="rectPercent" IsHitTestVisible="False" Fill="#FF797979" StrokeThickness="0" RadiusX="3" RadiusY="3" VerticalAlignment="Stretch" 
                   HorizontalAlignment="Left" Width="56" />
        <TextBlock x:Name="textValue" Text="25" Padding="5,0,5,0"  Foreground="White" IsHitTestVisible="False" />
        <TextBox x:Name="textValueEdit" Text="25" Padding="4,-1,4,0" BorderThickness="0" Background="#20000000" Foreground="White" Visibility="Collapsed"
                         LostFocus="textValueEdit_LostFocus" KeyDown="textValueEdit_KeyDown" />

        <Button Margin="3,-1,-1,-1"  Grid.Column="1" Padding="1" Cursor="Arrow" x:Name="btnEditValue" Click="btnEditValue_Click"
                 MouseEnter="btnEditValue_MouseEnter" MouseLeave="btnEditValue_MouseLeave"
                 >
            <ToolTipService.ToolTip>
                <ToolTip Content="Edit Value" Margin="0,14,0,0" />
            </ToolTipService.ToolTip>
            <Button.Content>
                <Image Source="edit.png"  />
            </Button.Content>
        </Button>
    </Grid>
</UserControl>
